<template>
  <view 
    class="calendar-item"
    :class="{
      'current-month': date.isCurrentMonth,
      'today': isToday,
      'selected': isSelected,
      'weekend': date.weekday === 0 || date.weekday === 6
    }"
    @click="$emit('click', date)"
  >
    <text class="solar-date">{{ date.day }}</text>
    <text class="lunar-date">{{ date.lunar }}</text>
    <text v-if="isToday" class="today-label">今天</text>
  </view>
</template>

<script>
export default {
  props: {
    date: Object,
    isToday: Boolean,
    isSelected: Boolean
  }
}
</script>

<style scoped>
.calendar-item {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 10rpx;
  position: relative;
}

.calendar-item:not(.current-month) {
  color: #ccc;
}

.calendar-item.weekend:not(.current-month) {
  color: #ffcccc;
}

.calendar-item.today {
  color: #1890ff;
}

.calendar-item.selected {
  background: #1890ff;
  color: #fff;
}

.calendar-item.selected .lunar-date {
  color: #fff;
}

.solar-date {
  font-size: 28rpx;
  font-weight: 500;
}

.lunar-date {
  font-size: 20rpx;
  margin-top: 4rpx;
  color: #999;
}

.today-label {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  font-size: 18rpx;
  color: #1890ff;
  background: #e6f7ff;
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
}

.calendar-item.selected .today-label {
  background: #0056b3;
  color: #fff;
}
</style>